<template>
    <view class="content" style="width: 100%;verflow: hidden;background: #ffffff;">
		
		<!-- 搜素条 -->
		<!-- <view class="header J-reduceHeight" :style="{position:headerPosition}">
			<view class="addr" @tap="selectLocation()" style="display: flex;"> 
				<view class="icon location"></view>
				<view v-if="!loadingCity" style="max-width: 280upx;white-space: nowrap; text-overflow: ellipsis;overflow:hidden;">{{city}}</view>
				<uni-load-more :status="'loading'" :contentText="{s:1}" v-if="loadingCity" style="margin: 0;margin-left: 5px;width: 22px;"/>
				<view v-if="!loadingCity" class="iconfont" style="line-height:1;margin-top: 0;">&#xe61d;</view>
			</view>
			<view class="input-box">
				<input placeholder="默认关键字" placeholder-style="color:#c0c0c0;" @tap="toSearch" disabled/>
				<view class="icon search"></view>
			</view>
			<view class="icon-btn">
				<view class="icon tongzhi" @tap="toMsg"></view>
			</view>
		</view> -->
		
		<!-- 轮播图 -->
		<view class="swiper J-reduceHeight" v-if="data.show_slides">
			<view v-if="!homeSlide.length" style="display:flex;align-items:center;height: 100%;text-align: center;">
				<text style="flex: 1;color: gainsboro;">未上传展示图</text>
			</view>
			<swiper v-if="homeSlide.length" style="height: 100%;" :indicator-dots="true" :autoplay="false" interval="5000" duration="1000">
				<swiper-item v-for="(item , index) in homeSlide" :key="index" >
					<image :src="item.img" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>	
		
		<view>
			<view>1，自营商城</view>
		</view>
		
		<view class="introduce">
			<view>1，自营商城</view>
		</view>
		<view class="introduce">
			1，自营配送
		</view>
		
		<view class="menu">
			<view class="menu-item-list">
				<view class="item left">
					<view> 
						<text>1，自营配送</text>
						<text>2，定制配送</text>
						3，小区团购
						4，活动用品定制
						5，团队下午茶
						6，每日牛奶	
						7，小区圈子
					</view>
				</view>
				<view class="item right">
					<view>2</view>
				</view>
			</view>
		</view>
		
		
		<!-- 定时配送 -->
		<view class="example-body">
			<uni-grid :column="4" :show-border="false" :square="false" @change="change">
				<uni-grid-item v-if="index < 6" v-for="(item ,index) in list" :index="index" :key="index">
					<view class="grid-item-box">
						<view v-if="item.icon" class="iconfont" style="line-height:1;margin-top: 0;font-size:60rpx;color: #EA2020;" v-html="item.icon"></view>
						<text class="text">{{item.text}}</text>
						<view v-if="item.badge" class="grid-dot">
							<uni-badge :text="item.badge" :type="'error'" />
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		
		<!-- 小区服务 -->	
		<view style="padding: 0 10px;"> 小区服务 </view>
		
			
    </view>
</template>

<script>
    import { mapState } from 'vuex'
	import config from '@/config/config'
	import uniGrid from '@/components/uni-ui/uni-grid/uni-grid.vue'
	import uniGridItem from '@/components/uni-ui/uni-grid-item/uni-grid-item.vue'
	import uniBadge from '@/components/uni-ui/uni-badge/uni-badge.vue'
	
    export default {
		components: { uniGrid, uniGridItem, uniBadge },
        data() {
			return {
				list: [
					{ icon: '&#xe61f;', text: '定时配送',badge: '爆' },
					{ icon: '&#xe630;', text: '限时活动'},
					{ icon: '&#xe620;', text: '每日牛奶'},
					{ icon: '&#xe7b0;', text: '新鲜果蔬'},
				],
				headerPosition:"relative",
				city:"",
				loadingCity:true,
				skeletonShow:true,
				page:1,
				reduceHeight:0,
				data:{
					index:0,
					show_means:false,  	//显示店铺资料
					show_stock:false,  	//显示库存
					show_slides:false,  //显示显示店铺展示图
					goods_count:0,	   //当前页数据量
					all_goods_count:0, //总数量
					delivery_fee:0,	   //配送费
					delivery_price:0,  //起送价
					slides:[],	  	   //轮播 [{img:'../.png'}]
					notices:[],		   //通告 ['','']
					goods:[]		   //商品 
					//goods = [{name:'',foods：[{id:1,name:"",old_price:0,price:0,discount:0,sell_count:0,satisfy:99,reduce:20,remark:"",imgs:".png,.png",img:'png'} ]} ]
				},
				is_load_complete:false
			}
        },
		computed:{
			...mapState(['forcedLogin', 'hasLogin', 'userInfo',"userAddrInfo"]),
			homeSlide: function(){
				if(!this.data.slides){ return []; }
				return this.data.slides.map(h=>{
					h.img = (config.debug ? config.debugUrl : config.serverUrl).replace('index.php/','/') + String(h.img).replace(/\\/g,"\/");
					return h;
				});
			},
			height:function(){
				return Number(uni.getSystemInfoSync().windowHeight) - this.reduceHeight;
			}
		},
		watch:{
			userAddrInfo:function(newVal){
				this.city = newVal.pois[0].title || "";
				this.loadingCity = false;
			}
		},
		onLoad(option){
			if(option.index) that.currentIndex = option.index;
			this.getReduceHeight(); 
		},
		onShow(){
			this.getGoodsData();
			if(this.userAddrInfo.address){
				this.city = this.userAddrInfo.pois[0].title || "";
				this.loadingCity = false;
			}
		},
		onPullDownRefresh(){
			this.getGoodsData();
		},
		methods:{
			// 获取元素高度
			getReduceHeight(){
				try{
					let that = this;
					let dom = wx.createSelectorQuery().in(this);
					this.$nextTick(function(){
						dom.selectAll('.J-reduceHeight').boundingClientRect(e => {
							that.reduceHeight = 0;
							for (let i = 0; i < e.length; i++) {
								that.reduceHeight += parseInt(e[i].height);
							}
						}).exec();
					});
				}catch(e){
					//TODO handle the exception
				}
			},
			// 获取商品数据
			getGoodsData(){
				this.$request('/app/v1/Goods/getGoodsData',{page:this.page}).then((res)=>{
					this.is_load_complete=true;
					uni.stopPullDownRefresh();
					if(!res.data) return false;
					let data = res.data;
					if(data && data['goods']){
						data.goods = data['goods'].map(h=>{
							if(h.foods && h.foods[0]){
								h.foods = h.foods.map(l=>{
									l.img = (config.debug ? config.debugUrl : config.serverUrl).replace('index.php/','/') + String(l.img).replace(/\\/g,"\/");
									l.count = this.getStorageCount(l.id);									
									return l;
								}); 	
							}
							return h;
						});
						uni.setStorageSync("goodsData",data);
					}
					this.skeletonShow=false;
					data.index = this.data.index + 1;
					this.data = data;
					this.getReduceHeight(); 
				}).catch(res=>{   
					uni.stopPullDownRefresh();
				});
			},
			// 获取计数
			getStorageCount(id){
				let count = 0;
				let goodsData = uni.getStorageSync("goodsData");
				if(goodsData && id && goodsData.goods && goodsData.goods[0]){
					goodsData.goods.forEach(h=>{
						if(h.foods && h.foods[0]){
							h.foods.map(l=>{
								if(id==l.id) count = (l.count || 0);
							}); 	
						}
					});
				}
				return count;
			},
			// 分页
			pagingPage(){
				if(this.data.goods_count<this.data.all_goods_count){
					this.page = (this.page + 1);
					this.getGoodsData();
				}
			},
			// 数据更新
			dataUpdate(data){
				uni.setStorageSync("goodsData",data);
			},
			//点击商品
			onClick(item) {
				uni.navigateTo({
					url: '/pages/main/details?id='+ item.id,
					animationType:'slide-in-right'
				});
			},
			// 结算
			settlement(data){
				let item = data.map(h=>{ 
					return {
						goods_id:h.id,
						count:h.count,
						price:h.price
					} 
				})
				uni.navigateTo({
					url: '/pages/order/createOrder?item='+encodeURIComponent(JSON.stringify(item)),
				});
			},
			//选择地址
			selectLocation(){
				
			},
			//搜索跳转
			toSearch(e){
				uni.redirectTo({ url: 'search?page=main'});
			},
			//消息列表
			toMsg(){
				uni.navigateTo({ url:'/pages/msg/msg'})
			}
		}
		
    }
</script>

<style lang="scss">
	@import 'main.scss';
	.header{
		width:calc(100% - 10px);
		padding-left: 5px;
		padding-right: 5px;
		height: 85upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background: #EA2020;
		color: #fff;
		.addr{
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			font-size: 28upx;
			white-space: nowrap;
			overflow: hidden;
			padding-right: 5px;
			text-align: center;
			.icon{
				margin-right: 5upx;
				display: flex;
				align-items: center;
				line-height: 1;
				font-size: 36upx;
				color: #ffc50a;
			}
		}
		.input-box{
			width: 100%;
			height: 60upx;
			background-color: #fff;
			border-radius: 30upx;
			position: relative;
			display: flex;
			align-items: center;
			.icon{
				display: flex;
				align-items: center;
				position: absolute;
				top:0;
				right: 0;
				width: 60upx;
				height: 60upx;
				font-size: 34upx;
				color: #c0c0c0;
			}
			input{
				padding-left: 28upx;
				height: 28upx;
				line-height:30upx;
				font-size: 28upx;
			}
		}
		.icon-btn{
			width: 60upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			.icon{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 42upx;
				color: #fff;
				padding: 0 6px;
			}
		}
	}
	
	// 店铺资料
	.shopMeans {
		position: relative;
		display: flex;
		top: 3px;
		z-index: 2;
		right: 0;
		padding: 0px 5px;
		color: #ffff;
		min-width: 76px;
		border-radius: 5px;
		line-height: 24px;
		height: 24px;
		background: rgba(0, 0, 0, 0.5);
		background: none;
		color: #e41a1a;
		>.iconfont:last-child{
			line-height: 25px;
		}
	}
	
    // 轮播
    .swiper{
    	width: 100%;
    	height: 350upx;
		swiper-item image{
			width: 100%;
			height: 100%;
		}
    }
    
    // 通告
    .grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		
		.grid-dot {
			position: absolute;
			top: 5px;
			right: 5px;
			border-radius: 50%;
		}
	}
</style>
